<html>

	<head>
	    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	
		<script type="text/javascript" src="js/com.unknown.Constants.js" ></script>
		<script type="text/javascript" src="js/Rectangle.js" ></script>
		<script type="text/javascript" src="js/Matrix2d.js" ></script>
		<script type="text/javascript" src="js/Vector2.js" ></script>
		<script type="text/javascript" src="js/Quad.js" ></script>
		<script type="text/javascript" src="js/InputManager.js" ></script>
		<script type="text/javascript" src="js/HexGrid.js" ></script>
		<script type="text/javascript" src="plugin/jquery/jquery-1.5.2.min.js" ></script>
		<script type="text/javascript" src="js/com.unknown.GameWindow.js" ></script>
	</head>
	
	<body>
		<div id="imageBucket">
			<img id="playerWalk" src="images/characters/thin_player_Walk.png" />
		</div>
		<canvas id="canvas" />
		
		
		<script type="text/javascript">
			canvas.width = 1000;
			canvas.height = 1000;
			var gameWindow = null;
			try{
				gameWindow = new com.unknown.GameWindow(canvas, imageBucket, null);

			gameWindow.start();
			var DEGREES_TO_RADIANS = Math.PI / 180.0;
			
			MouseDraw = function(){
				this.history = [];
				this.down = false;
				this.start = {x:0, y:0};
				this.active = 0;
				this.activeNode = null;
			};
			MouseDraw.prototype = {
				render : function(gw){
					var c = gw.c;
					var remove = [];
					var history = this.history;
					history.forEach(function(item, index){
						c.beginPath();
						c.strokeStyle = "cyan";
						c.lineWidth = 6;
						c.arc(item.x, item.y, item.size, 0, Math.PI*2, true);
						c.stroke();
						
						item.size--;
						if( item.size == 0 ){
							remove.push( index );
						}
					});
					remove.forEach(function(item){
						history.shift();
					});
				},
				hit : function(x, y){
					this.history.push({x:x, y:y, size:30});
				},
				intersects : function(){ return false; }
				,setActive : function(value){}
			};
						
			var md = new HexGrid();
			
			gameWindow.entities["MouseDraw"] = md;
			gameWindow.entities["grid"] = md.node;
						
			var inputManager = new InputManager();
			if( 'createTouch' in document ){
				new TouchInputDevice(inputManager, canvas);
			}else{
				new MouseInputDevice(inputManager);	
			}
			inputManager.addListener('hittest', {
				onMove : function(e){
					if(e.bId){
						md.hit(e.x, e.y);
					}
					if(e.bId){
						for(var member in gameWindow.entities){
							try{
								var entity = gameWindow.entities[member];
								var intersection = entity.intersects(e);
								if( entity && intersection ){
									entity = intersection.pop();
									entity.setActive(true);
									md.activeNode = entity;
									break;
								}
							}catch(ex){
								console.log(ex);
							}
						}
					}
				},
				onButtonDown : function(e){
					md.hit(e.x,e.y);
					for(var member in gameWindow.entities){
						try{
							var entity = gameWindow.entities[member];
							var intersection = entity.intersects(e);
							if( entity && intersection ){
								entity = intersection.pop();
								entity.setActive(true);
								md.activeNode = entity;
								break;
							}
						}catch(ex){
							console.log(ex);
						}
					}
				},
				onButtonUp : function(e){
					md.down = false;
					for(var member in gameWindow.entities){
						try{
							var entity = gameWindow.entities[member];
							entity.setActive(false);
							md.activeNode = null;
						}catch(ex){
							console.log(ex);
						}
					}
				}
			});
			}catch( ex ) { alert(ex); }
		</script>
		
	</body>
</html>